<template>
    <Echart :option="option"></Echart>
</template>

<script setup>
import * as echarts from 'echarts';

import Echart from './echart.vue';
const nameArr = ['1', '2', '3', '4']
const valueArr = [150, 60, 80, 180]
const option = {
    grid: {
        top: '10%',
        left: '12%',
        right: '5%',
        bottom: '20%'
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#3A4667',
        borderColor: '#3A4667',
        textStyle: {
            color: '#fff'
        },
        formatter: '{b} : {c}',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        icon: 'rect',
        top: 10,
        right: 5,
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
            fontSize: 12, // 字体大小
            // 			color: '#B3CFFF', // 字体颜色
            color: '#FFEB3B'

        }
    },
    yAxis: {
        type: 'category',
        axisPointer: {
            type: 'shadow'
        },
        axisLine: {
            show: false, // 不显示 y 轴线
        },
        axisLabel: {
            textStyle: {
                color: '#B4C0CC', // y轴文本颜色
                fontSize: 12
            },
        },
        axisTick: {
            show: true, // 显示 x 轴刻度
            alignWithLabel: true, // 刻度与标签对齐
            lineStyle: {
                color: '#B4C0CC', // 刻度颜色
            }
        },
        data: nameArr
    },
    xAxis: {
        type: 'value',
        splitLine: {
            show: false, // 不显示 x 轴分割线
        },
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: '#B4C0CC', // x轴文本颜色
                fontSize: 12
            },
        },
        axisLine: {
            show: false, // 不显示 x 轴线
        },
        axisTick: {
            show: true, // 显示 x 轴刻度
            alignWithLabel: true, // 刻度与标签对齐
            lineStyle: {
                color: '#B4C0CC', // 刻度颜色
            }
        },
        name: '',
        nameTextStyle: {
            color: '#B3CFFF',
            fontSize: 12,
        }
    },
    series: [{
        type: 'bar',
        name: '',
        barWidth: 27,
        emphasis: {
            itemStyle: {
                color: '#7fb7e9'
            }
        },
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#02AFA1',
                    opacity: 1
                },
                {
                    offset: 1,
                    color: "#451b80",
                    opacity: 1
                }
                ]),
            }
        },
        data: valueArr
    }
    ]
}
</script>

<style scoped lang="scss"></style>